<script>
export default {
  data() {
    return {
      //查询文件的输入框
      filterText: '',
      //设置了子目录、父目录的标签名称
      defaultProps: {
        children: 'children',
        label: 'label'
      },

    };
  },
  props:['data1'],
  methods: {
    //导航栏查询内容的函数
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //用在单击列表时候传递出去的数据。
    handleNodeClick(data,node) {
      // data 是被点击的节点的数据
      // node 是被点击的节点对应的节点对象
      // component 是对应的 Tree 组件的实例
      this.$emit("TreeClick",data,node);
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>

<template>
  <div>
    <el-input
        placeholder="输入关键字进行查询"
        v-model="filterText">
    </el-input>

    <el-tree
        class="filter-tree"
        :data="data1"
        :props="defaultProps"
        highlight-current="highlight-current"
        @node-click="handleNodeClick"
        default-expand-all="default-expand-all"
        :filter-node-method="filterNode"
        ref="tree"
        style="margin-top: 10px"></el-tree>
  </div>

</template>

<style scoped>

</style>